<template>
  <div style="padding: 40px">
    <div style="margin: 10px 0; display: flex; align-items: center">
      <el-input 
        v-model="searchName" 
        placeholder="宠物名称" 
        clearable 
        style="width: 200px; margin-right: 10px"
      />
       <el-input
        v-model="searchDescription"
        placeholder="宠物描  述"
        clearable
        style="width: 200px; margin-right: 10px"
      />
      <el-button type="primary" style="margin-left: 10px;" @click="load">搜索</el-button>
      <el-button type="primary" style="margin-left: 10px;" @click="add">新增宠物</el-button>
    </div>


    <el-table :data="tableData" border stripe style="width: 100%;">
      <el-table-column type="index" label="通知ID" width="100px" />
      <el-table-column prop="petName" label="宠物名称" />
      <el-table-column label="宠物名称">
        <template #default="scope">
          <el-tag v-if="scope.row.petGender === 0" type="danger">女</el-tag>
          <el-tag v-else type="success">男</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="petAge" label="宠物年龄" />
      <el-table-column prop="petAvatar" label="宠物照片">
        <template #default="scope">
          <el-image 
            style="width: 100px; height: 100px"
            :src="scope.row.petAvatar" 
            :preview-src-list="[scope.row.petAvatar]" fit="cover">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="petDescription" label="宠物描  述" />
      <el-table-column fixed="right" label="操作" width="350">
        <template #default="scope">
          <!-- 编辑按钮  -->
          <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="添加宠物" width="50%" @close="closeDialog">
      <el-form :model="form" label-width="120px" ref="formRef">
        <el-form-item label="宠物名称" prop="petName">
          <el-input v-model="form.petName"></el-input>
        </el-form-item>
        <el-form-item label="宠物年龄" prop="petAge">
          <el-input-number v-model="form.petAge" :min="1" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="宠物性别" prop="petGender">
          <el-radio v-model="form.petGender" :label="0">母</el-radio>
          <el-radio v-model="form.petGender" :label="1">公</el-radio>
        </el-form-item>
        <el-form-item label="宠物描  述" prop="petDescription">
          <el-input v-model="form.petDescription" type="textarea" :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="宠物头像" prop="petAvatar">
          <el-upload action="#" :file-list="fileList" list-type="picture-card" :limit="1" :on-change="handelChange"
            :data="dataList" :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 点击编辑的弹窗 -->
    <el-dialog :visible.sync="dialogVisible1" title="编辑宠物" width="30%" @close="closeDialog">

      <el-form :model="form1" label-width="120px">

        <el-form-item label="宠物名称">
          <el-input v-model="form1.petName"></el-input>
        </el-form-item>
        <el-form-item label="宠物年龄">
          <el-input-number v-model="form1.petAge" :min="1" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="宠物性别">
          <el-radio v-model="form1.petGender" :label="0">母</el-radio>
          <el-radio v-model="form1.petGender" :label="1">公</el-radio>
        </el-form-item>
        <el-form-item label="宠物描  述">
          <el-input v-model="form1.petDescription" type="textarea" :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload action="#" :file-list="fileList" list-type="picture-card" :limit="1" :on-change="handelChange"
            :data="dataList" :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">确定</el-button>
      </span>
    </el-dialog>

    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-size="pageSize" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { PostPetAdd, PostPetList, PostPetUpdate } from '@/http/pet.js'
import { getUpload } from '@/http/upload.js'

export default {


  data() {
    return {
      form: {
        petAge: 1,
        petDescription: "",
        petGender: 0,
        petName: "",
        petAvatar: "",
      },
      dataList: {},
      fileList: [],
      form1: {},
      dialogVisible: false,
      dialogVisible1: false,
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      ttid: '',
      total: 0,
      ttcontent: '',
      tpubTime: '',
      ttitle: '',
      searchName: '',
      searchDescription: '',
    }

  },
  created() {
    this.load()
  },

  methods: {
    async  handelChange(file, fileList){
        let formData =  new FormData()
        formData.append("file", file.raw);
        const res = await  getUpload(formData)
        if (res !== '') {
          this.$message({
            message: "上传成功",
            type: "success",
          });
        }
        this.form.petAvatar = res.data
        this.fileList =  [{name: 'food.jpg', url: res.data}]
      },
    async load() {
      const { code, message, data } = await PostPetList({
        "current": this.currentPage,
        "pageSize": this.pageSize,
        "petName": this.searchName,          // 添加名称查询参数
        "petDescription": this.searchDescription // 添加描  述查询参数
      })
      if (code == '0') {
        this.$message({
          type: "success",
          message: "查询成功"
        })
      } else {
        this.$message({
          type: "error",
          message: message
        })
      }
      this.tableData = data.records
      this.total = data.total

    },
    add() {
      this.dialogVisible = true
    },
    // 确认添加
    async save() {
      const { code, message } = await PostPetAdd(this.form)
      console.log(this.form)
      if (code == '0') {
        this.$message({
          type: "success",
          message: "添加成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "添加失败"
        })
      }
      this.dialogVisible = false
      this.load()
    },
    // 编辑
    handleEdit(row) {
      this.form1 = { ...row }
      this.fileList = [{ name: 'food.jpg', url: this.form1.petAvatar }]
      this.dialogVisible1 = true
    },
    // 确认修改
    async saveEdit() {

      const { code, message } = await PostPetUpdate(this.form1)
      if (code == '0') {
        this.$message({
          type: "success",
          message: "修改成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "修改失败"
        })
      }
      this.dialogVisible1 = false
      this.load()
    },
    async handleDelete(id) {
      console.log(id);

      const { code, message } = await getCategoriesDelete({ id: id })
      if (code == '0') {
        this.$message({
          type: "success",
          message: "删除成功"
        })
      } else {
        this.$message({
          type: "error",
          message: message
        })
      }
      this.load()  // 删除之后重新加载表格的数据
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()

    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.load()
    },
    onDaloag(row) {
      this.form1 = row
      this.dialogVisible2 = true
    },
    closeDialog() {
      this.dialogVisible1 = false
      this.$refs.formRef.resetFields()
      this.fileList = []
    }
  },
  computed: {
    ...mapGetters({
      userRole: 'user/getUserRole'
    })
  }

}
</script>

<style></style>